<template>
  <el-dialog
    :model-value="visible"
    :title="isEdit ? '编辑Flink作业' : '注册Flink作业'"
    width="700px"
    :before-close="handleClose"
    @update:model-value="$emit('update:visible', $event)"
  >
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
      <!-- 基本信息 -->
      <el-form-item label="作业名称" prop="jobName" required>
        <el-input v-model="form.jobName" placeholder="请输入作业名称" />
      </el-form-item>

      <el-form-item label="作业描述" prop="jobDescription">
        <el-input
          v-model="form.jobDescription"
          type="textarea"
          placeholder="请输入作业描述"
        />
      </el-form-item>

      <el-form-item label="JAR包路径" prop="jarPath" required>
        <el-input v-model="form.jarPath" placeholder="请输入JAR包完整路径" />
      </el-form-item>

      <el-form-item label="入口类" prop="entryClass" required>
        <el-input v-model="form.entryClass" placeholder="请输入入口类全限定名" />
      </el-form-item>

      <el-form-item label="程序参数" prop="programArgs">
        <el-input
          v-model="form.programArgs"
          type="textarea"
          placeholder="请输入程序启动参数"
        />
      </el-form-item>

      <!-- 配置信息 -->
      <el-divider content-position="left">配置信息</el-divider>

      <el-form-item label="启用自动恢复">
        <el-switch v-model="form.autoRecovery" />
      </el-form-item>

      <el-form-item
        v-if="form.autoRecovery"
        label="最大恢复尝试次数"
        prop="maxRecoveryAttempts"
      >
        <el-input-number
          v-model="form.maxRecoveryAttempts"
          :min="1"
          :max="10"
        />
      </el-form-item>

      <el-form-item
        v-if="form.autoRecovery"
        label="保存点间隔"
        prop="savepointInterval"
      >
        <el-input-number
          v-model="form.savepointInterval"
          :min="1"
          :max="168"
        />
        <span class="ml-2">小时</span>
      </el-form-item>

      <el-form-item label="最大运行时间" prop="maxRunningTime">
        <el-input-number
          v-model="form.maxRunningTime"
          :min="1"
          :max="720"
        />
        <span class="ml-2">小时</span>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">
          {{ isEdit ? '更新' : '注册' }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface FlinkJobRegisterProps {
  visible: boolean
  onClose: () => void
  onSubmit: (jobData: any) => void
  initialData?: any
  isEdit?: boolean
}

const props = defineProps<FlinkJobRegisterProps>()
const emit = defineEmits(['update:visible'])

const formRef = ref<FormInstance>()
const loading = ref(false)

const form = reactive({
  jobName: '',
  jobDescription: '',
  jarPath: '',
  entryClass: '',
  programArgs: '',
  autoRecovery: true,
  maxRecoveryAttempts: 3,
  savepointInterval: 24,
  maxRunningTime: 72
})

const rules: FormRules = {
  jobName: [
    { required: true, message: '请输入作业名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  jarPath: [
    { required: true, message: '请输入JAR包路径', trigger: 'blur' }
  ],
  entryClass: [
    { required: true, message: '请输入入口类', trigger: 'blur' }
  ],
  maxRecoveryAttempts: [
    { required: true, message: '请输入最大恢复尝试次数', trigger: 'blur' }
  ],
  savepointInterval: [
    { required: true, message: '请输入保存点间隔', trigger: 'blur' }
  ]
}

// 监听visible变化
watch(() => props.visible, (newVal) => {
  if (newVal) {
    if (props.isEdit && props.initialData) {
      // 编辑模式，填充初始数据
      Object.assign(form, props.initialData)
    } else {
      // 新增模式，重置表单
      Object.assign(form, {
        jobName: '',
        jobDescription: '',
        jarPath: '',
        entryClass: '',
        programArgs: '',
        autoRecovery: true,
        maxRecoveryAttempts: 3,
        savepointInterval: 24,
        maxRunningTime: 72
      })
    }
  }
})

const handleClose = () => {
  emit('update:visible', false)
  props.onClose()
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    loading.value = true
    
    const jobData = {
      jobName: form.jobName,
      jobDescription: form.jobDescription,
      jarPath: form.jarPath,
      entryClass: form.entryClass,
      programArgs: form.programArgs,
      autoRecovery: form.autoRecovery,
      maxRecoveryAttempts: form.maxRecoveryAttempts,
      savepointInterval: form.savepointInterval,
      maxRunningTime: form.maxRunningTime
    }
    
    await props.onSubmit(jobData)
    handleClose()
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.ml-2 {
  margin-left: 8px;
}

.el-divider {
  margin: 20px 0;
}
</style> 